<template>
	<view :class="vuex_theme">
		<view class="wrap color-gradual">
			<u-image class="logo" width="300rpx" height="300rpx" src="/static/image/logo.png">
			</u-image>
			<view class="u-config-wrap">
				<u-form :model="form" ref="uForm" label-width="auto" :label-style="lobleStyle">
					<u-form-item label="服务器地址:" prop="baseUrl" label-position="top">
						<u-input v-model="form.baseUrl" placeholder="http://example"
							placeholder-style="color: #666666; margin-left: 20rpx" :custom-style="lobleStyle" />
					</u-form-item>
					<view class="setting-split"></view>
					<u-button type="primary" @click="setBaseUrl" :disabled="!form.baseUrl" shape="circle">确定</u-button>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					baseUrl: ''
				},
				lobleStyle: {
					color: "#ffffff"
				},
				rules: {
					baseUrl: [{
						trigger: 'blur',
						message: 'URL格式错误',
						type: 'url'
					}]
				}
			}
		},
		onLoad() {
			const baseUrl = this.$u.http.config.baseUrl
			if (baseUrl) {
				this.$u.route({
					url: 'pages/cloud/video/index',
					type: 'tab'
				})
			} else {
				uni.getStorage({
					key: 'base_url',
					success: function(res) {
						self.$u.http.config.baseUrl = self.form.baseUrl = res.data
						self.$u.route({
							url: 'pages/cloud/video/index',
							type: 'tab'
						})
					},
					fail: function() {

					}

				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			setBaseUrl() {
				const self = this
				self.$refs.uForm.validate(valid => {
					if (valid) {
						uni.request({
							url: self.form.baseUrl + '/api/', //仅为示例，并非真实接口地址。
							success: (res) => {
								uni.setStorage({
									key: 'base_url',
									data: self.form.baseUrl,
									success: function(res) {
										self.$u.http.config.baseUrl = self.form.baseUrl
										self.$u.route({
											url: 'pages/cloud/video/index',
											type: 'tab'
										})
									}
								});
							},
							fail: function() {

							}
						});
					} else {
						console.log('URL错误');
					}
				});



			}
		}
	}
</script>


<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
		height: 100vh;
	}

	.logo {
		margin: 30rpx 195rpx 100rpx 195rpx;
	}

	.setting-split {
		height: 100rpx;
		width: 100%;
		display: block;
	}
</style>
